import React, { Component } from 'react'
import { Form, Input, Button, message, Layout } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'; 
import { BrowserRouter as Router, Switch,Route,Link} from "react-router-dom";
import myAxios from '../service/myAxios';
import Register from './Register';

import "../css/login.css"
import md5 from 'js-md5'

//白名单
import {withRouter} from 'react-router-dom'
import FormItem from 'antd/lib/form/FormItem';




 class LoginMain extends Component {

  //完整的网络请求
  onFinish = values => {
          //请求数据
          const value={
            username:values.username,
            password:md5(values.password)
          }
          console.log(value);
          myAxios.post('user/login', value)
          .then(data => {
            console.log(data);
            if(data.code===5001){
              localStorage.setItem("isLogin", data.data.name)
              localStorage.setItem("adminToken",data.data.token)
              window.location.reload();
              message.success(data.message)
            }
          })
  };


  
  render() {
    return (
       <Router>

       <div className='first-content' >
        <div className="content"  >
        <br/>          
              <div><h1>欢迎登录界面</h1></div>

             <br/>       
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{
                remember: true,
              }}
              onFinish={this.onFinish}
            >

              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名',
                  },
                ]}
              >
                  <Input style={{width:'300px'}} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
              </Form.Item>

              
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                ]}
              >
                <Input
                 style={{width:'300px'}}
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Password"
                />
              </Form.Item>
              <FormItem>
                <Link to="/register" >还没账号？立即注册</Link>
              </FormItem>

              <Form.Item>
                <Button type="primary" htmlType="submit" style={{width:'300px'}}>
                  登录
                </Button>
              </Form.Item>
    
            </Form>
          </div>
      </div>
      </Router>
      
    )
  }
}

export default withRouter(LoginMain);

